﻿@page "/multiselects"
@inject IStringLocalizer<MultiSelects> Localizer

<h3>@Localizer["Title"]</h3>

<h4>@Localizer["H1"]</h4>

<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Color">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect Color="Color.Primary" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect Color="Color.Success" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect Color="Color.Danger" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect Color="Color.Warning" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect Color="Color.Info" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect Color="Color.Secondary" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect Color="Color.Dark" Items="@Items" @bind-Value="@Model.Address"></MultiSelect>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="BindingString">
    <p>
        @((MarkupString)Localizer["Div1"].Value)
    </p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@Items4" @bind-Value="@SelectedItemsValue"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa fa-plus" Text="@Localizer["ButtonText1"]" OnClick="@AddItems" class="me-1"></Button>
            <Button Icon="fa fa-minus" Text="@Localizer["ButtonText2"]" OnClick="@RemoveItems"></Button>
            <Button Icon="fa fa-trash-o" Text="@Localizer["ButtonText3"]" OnClick="@ClearItems"></Button>
        </div>
    </div>
    <div class="mt-3">@SelectedItemsValue</div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="BindingCollection">
    <p>@((MarkupString)Localizer["P1"].Value)</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@Items5" @bind-Value="@SelectedArrayValues"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa fa-plus" Text="@Localizer["ButtonText1"]" OnClick="@AddListItems" class="me-1"></Button>
            <Button Icon="fa fa-minus" Text="@Localizer["ButtonText2"]" OnClick="@RemoveListItems"></Button>
            <Button Icon="fa fa-trash-o" Text="@Localizer["ButtonText3"]" OnClick="@ClearListItems"></Button>
        </div>
    </div>
    <div class="mt-3">@(string.Join(",", SelectedArrayValues))</div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="BindingNumber">
    <p>@((MarkupString)Localizer["P2"].Value)</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@LongItems" @bind-Value="@SelectedIntArrayValues"></MultiSelect>
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa fa-plus" Text="@Localizer["ButtonText1"]" OnClick="@AddArrayItems" class="me-1"></Button>
            <Button Icon="fa fa-minus" Text="@Localizer["ButtonText2"]" OnClick="@RemoveArrayItems"></Button>
            <Button Icon="fa fa-trash-o" Text="@Localizer["ButtonText3"]" OnClick="@ClearArrayItems"></Button>
        </div>
    </div>
    <div class="mt-3">@(string.Join(",", SelectedIntArrayValues))</div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="BindingEnumCollection">
    <p>@((MarkupString)Localizer["P3"].Value)</p>
    <MultiSelect @bind-Value="@SelectedEnumValues"></MultiSelect>
    <div class="mt-3">@(string.Join(",", SelectedEnumValues))</div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block6Title"]" Introduction="@Localizer["Block6Intro"]" Name="Search">
    <p>@((MarkupString)Localizer["P4"].Value)</p>
    <MultiSelect Items="@Items6" @bind-Value="@SelectedItemsValue6" ShowSearch="true" OnSearchTextChanged="@OnSearch"></MultiSelect>
    <div class="mt-3">@SelectedItemsValue6</div>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["BlockGroupTitle"]" Introduction="@Localizer["BlockGroupIntro"]" Name="Group">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Items="GroupItems" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block7Title"]" Introduction="@Localizer["Block7Intro"]" Name="Disable">
    <p>@Localizer["P5"]</p>
    <MultiSelect Items="@Items7" Value="@SelectedItemsValue7" IsDisabled="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["Block8Title"]" Introduction="@Localizer["Block8Intro"]" Name="OptionChange">
    <MultiSelect Items="@Items8" OnSelectedItemsChanged="@OnSelectedItemsChanged8" Value="@SelectedItemsValue8" />
    <BlockLogger @ref="Trace2" />
</DemoBlock>

<DemoBlock Title="@Localizer["Block9Title"]" Introduction="@Localizer["Block9Intro"]" Name="ClientValidation">
    <p>@((MarkupString)Localizer["P6"].Value)</p>
    <ValidateForm Model="@Model">
        <div class="row g-3">
            <div class="col-12 col-sm-8">
                <MultiSelect Items="Items8" @bind-Value="@Model.Address" />
            </div>
            <div class="col-12 col-sm-4 align-self-end">
                <Button ButtonType="ButtonType.Submit">@Localizer["ButtonText4"]</Button>
            </div>
        </div>
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["Block10Title"]" Introduction="@Localizer["Block10Intro"]" Name="DispalyLabel">
    <p>@((MarkupString)Localizer["P7"].Value)</p>
    <Divider Text="@Localizer["Divider1"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <ValidateForm Model="@Foo">
        <div class="row g-3">
            <div class="col-12">
                <MultiSelect Color="Color.Primary" Items="@Items9" @bind-Value="@Foo.Name" />
            </div>
        </div>
    </ValidateForm>
    <Divider Text="@Localizer["Divider2"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <MultiSelect Color="Color.Primary" Items="@Items10" @bind-Value="@Foo.Name" />
    <Divider Text="@Localizer["Divider3"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <MultiSelect Color="Color.Primary" Items="@Items11" @bind-Value="@Foo.Name" DisplayText="@Localizer["MutiText1"]" ShowLabel="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["Block11Title"]" Introduction="@Localizer["Block11Intro"]" Name="VeryLongText">
    <div style="max-width: 400px">
        <MultiSelect Items="@LongItems1" @bind-Value="@SelectedLongItemsValue1" DisplayText="@Localizer["MutiText2"]" ShowLabel="true"></MultiSelect>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block12Title"]" Introduction="@Localizer["Block12Intro"]" Name="Button">
    <div style="max-width: 400px">
        <MultiSelect Items="@LongItems2" @bind-Value="@SelectedLongItemsValue2" ShowToolbar="true" ShowSearch="true"></MultiSelect>
        <p>@SelectedLongItemsValue2</p>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block13Title"]" Introduction="@Localizer["Block13Intro"]" Name="MaxMin">
    <div style="max-width: 300px">
        <p>@Localizer["P8"]</p>
        <MultiSelect Items="@LongItems3" @bind-Value="@SelectedMaxItemsValue" Max="2"></MultiSelect>
    </div>
    <div style="max-width: 300px" class="mt-3">
        <p>@Localizer["P9"]</p>
        <MultiSelect Items="@LongItems4" @bind-Value="@SelectedMinItemsValue" Min="2"></MultiSelect>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block14Title"]" Introduction="@Localizer["Block14Intro"]" Name="ExpandButton">
    <div style="max-width: 300px">
        <MultiSelect Items="@LongItems5" @bind-Value="@SelectedLongItemsValue3" ShowToolbar="true" ShowDefaultButtons="false">
            <ButtonTemplate>
                <button class="btn" @onclick="@OnClickButton">@Localizer["ButtonText"]</button>
            </ButtonTemplate>
        </MultiSelect>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block15Title"]" Introduction="@Localizer["Block15Intro"]" Name="Cascading">
    <p>@((MarkupString)Localizer["P10"].Value)</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="@Items3" OnSelectedItemChanged="@OnCascadeBindSelectClick" />
        </div>
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Items="@Items2" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["ItemTemplateTitle"]" Introduction="@Localizer["ItemTemplateIntro"]" Name="ItemTemplate">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect TValue="string" Items="@TemplateItems">
                <ItemTemplate>
                    <div class="mul-select-item">
                        <i class="fa fa-fa"></i>
                        <span>@context.Text</span>
                        <i class="fa fa-fa"></i>
                    </div>
                </ItemTemplate>
            </MultiSelect>
        </div>
    </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
